<template>
  <div>
     <h1>我是子组件</h1>
      <button @click="tosend">传值</button>
      <form @submit.prevent="false">
        姓名： <input type="text" v-model="formObj.username">
        <br >
        年龄： <input type="text" v-model="formObj.age" /> 
        <br>
        城市：<select  v-model="formObj.city">
           <option value="廊坊">廊坊</option>
           <option value="北京">北京</option>
           <option value="天津">天津</option>
        </select>
        <br >
         <button @click="send">发送信息给父组件</button>
      </form>
  </div>
</template>
<script>
// vue的子传父数据 
// 父组件自定义事件 
// 子组件通过this.$emit()触发自定义事件并传值
// 父组件监听事件的触发，事件函数的形参就是传来的值
export default {
  name:"ziCom",
  data(){
    return {
      msg:"我是子组件的数据",
      car:"兰博基尼",
      formObj:{ //收集个人信息到一个对象中
        username:"", //姓名
        age:"", //年龄
        city:""//城市
      },
      img:"https://img0.baidu.com/it/u=298571637,2037437086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625"
    }
  },
  beforeCreate() {
    console.log("子组件的--创建前beforeCreate--生命周期")
  },
  created(){ //组件加载就传给父组件数据
       this.$emit("sendImg",this.img)
        console.log("子组件的--创建后created--生命周期")
  },
  beforeMount() {
     console.log("子组件的--挂载前beforeMount--生命周期")
  },
  mounted(){
      console.log("子组件的--挂载后mounted--生命周期")
  },
  methods:{
      tosend(){ 
          // 2子组件通过this.$emit()触发自定义事件并传值
          // this.$emit("自定义事件名",传递值,传递值..)
          this.$emit("sendMsg",this.msg,this.car)
      },
      send(){ //把子组件表单收集的数据 传给父组件显示
        this.$emit("sendUser",this.formObj)
      }
  }
}
</script>